<template>
  <div
    ref="contentRefDom"
    class="flex-1 h-full overflow-y-auto flex flex-col justify-between duration-900 dark:bg-zinc-900 dark:text-gray-100"
  >
    <div class="flex-1 p-4 space-y-4">
      <div class="flex items-center justify-between mb-4">
        <h1 class="text-xl font-bold text-gray-700 dark:text-gray-200">
          RepairLog
        </h1>
        <div class="text-sm text-gray-500 dark:text-gray-400">
          <span
            >这里是网站的修复日志,你可以查看你所提交的Bug反馈有没有进行修复!</span
          >
        </div>
      </div>
      <!-- 留言列表 -->
      <div
        v-for="message in repairRecords"
        :key="message.date"
        class="flex space-x-3"
      >
        <img
          :src="message.repairUserAvatar"
          alt="avatar"
          class="w-8 h-8 rounded-full shadow-md"
        />
        <div class="flex-1">
          <div
            class="p-3 rounded-md shadow-md dark:bg-zinc-800 dark:text-gray-100"
          >
            <div class="flex items-center space-x-2">
              <p
                class="font-semibold text-sm text-gray-900 dark:dark:text-zinc-100"
              >
                {{ message.repairUser }}
              </p>
              <span
                v-if="message.repairUserEmail"
                class="text-xs dark:text-zinc-100 px-2 py-1 rounded-sm"
              >
                Email: {{ message.repairUserEmail }}
              </span>
            </div>
            <p class="text-gray-600 dark:text-zinc-100 text-sm">
              {{ message.repairMessage }}
            </p>
          </div>

          <!-- 绿色线条、打勾图标、修复日期和修复者 -->
          <div class="flex items-center space-x-2 mt-2">
            <!-- 左侧绿色线条 -->
            <div class="flex-1 h-px bg-green-500"></div>

            <!-- 修复日期和修复者 -->
            <div class="flex items-center space-x-2">
              <span class="text-xs text-gray-500 dark:text-gray-400">
                {{ message.repairDate }}
              </span>
              <span class="text-xs text-gray-500 dark:text-gray-400">
                {{ message.repairUser }}
              </span>

              <!-- 打勾图标 -->
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-5 h-5 text-green-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M5 13l4 4L19 7"
                />
              </svg>
            </div>

            <!-- 右侧绿色线条 -->
            <div class="flex-1 h-px bg-green-500"></div>
          </div>
          <span
            class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right"
          >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { getRepairRecords } from '@/api/Desktop/admin/getRepairRecord.js'
const repairRecords = ref([])
const storedRecords = window.localStorage.getItem('repairRecords')
if (storedRecords) {
  repairRecords.value = JSON.parse(storedRecords)
} else {
  getRepairRecords().then((res) => {
    res.forEach((record) => {
      repairRecords.value.push({
        repairUser: record.commit.author.name,
        repairUserAvatar: record.committer?.avatar_url || '',
        repairDate: new Date(record.commit.author.date),
        repairMessage: record.commit.message,
        repairUserEmail: record.commit.author.email
      })
    })
    console.log(repairRecords)
    window.localStorage.setItem(
      'repairRecords',
      JSON.stringify(repairRecords.value)
    )
  })
}
</script>

<style scoped>
/* 可选样式：自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #cfd2d6;
  border-radius: 4px;
}
</style>
